#header

  h1, .h1
    margin-top: 0
    margin-bottom: 0
    color: var(--color-text)
    letter-spacing: .01em
    font-weight: 700
    font-style: normal
    font-size: 1.5rem
    line-height: 2rem

    antialias()

  a
    background: none
    color: inherit
    text-decoration: none

  #logo
    display: inline-block
    float: left
    margin-right: 20px
    width: $logo-width
    height: $logo-height
    border-radius: 5px
    background-size: $logo-width $logo-height
    background-repeat: no-repeat

    if ($logo-grayout)
      filter: grayscale(100%)
      -webkit-filter: grayscale(100%)

  #nav
    margin-top: .2rem
    color: var(--color-text)
    letter-spacing: .01rem
    font-style: normal
    font-size: .8rem

    ul
      display: flex
      flex-wrap: wrap
      margin: 0
      padding: 0
      list-style-type: none
      line-height: 15px

      a
        display: block
        margin-right: 15px
        color: var(--color-text)

      a:hover
        underline(5px, $color-accent-1)

        color: var(--color-link)

      li
        display: inline-block
        margin-right: 15px
        border-color: var(--color-text)
        border-right: 1px dotted
        vertical-align: middle

      .icon
        display: none

      li:last-child
        margin-right: 0
        border-right: 0

        a
          margin-right: 0

if ($logo-grayout)
  #header:hover
    #logo
      filter: none
      -webkit-filter: none

// @media screen and (max-width: 480px)
//   #header
//     margin: 0 auto
//     padding-bottom: .8rem
//     // border-bottom: 1px solid #eee
//     transition: height .5s

//   #header #title
//     display: flex
//     // margin-right: 5rem
//     min-height: $logo-height

//     h1
//       display: table-cell
//       vertical-align: middle

//   #header #nav
//     ul
//       a:hover
//         background: none

//       li
//         display: none
//         flex: 1
//         margin-right: 0
//         border-right: 0
//         opacity: 0
//         transition: all .5s

//       li.icon
//         position: absolute
//         top: 50px
//         right: 0rem
//         display: inline-block
//         margin-right: 0
//         opacity: 1

//       a
//         margin-right: 0
//         text-align: center

//     ul.responsive
//       li
//         display: block
//         opacity: 1
//         transition: all .5s

//     li:not(:first-child)
//       padding: 1.5rem 1rem .2rem
//       // padding-left: $logo-width + 20px
//       font-size: 1rem

//   #header
//     a
//       display: inline-table
